<template>
    <div>
        <el-row>
            <el-col :span="18">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="自定义敏感词" name="one">
                        <zi-ding-yi v-if="one"></zi-ding-yi>
                    </el-tab-pane>
                    <el-tab-pane label="放行的敏感词" name="two">
                        <fang-xing v-if="two"></fang-xing>
                    </el-tab-pane>
                    <el-tab-pane label="所有敏感词" name="three">
                        <suo-you v-if="three"></suo-you>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="6">
                <div class="j_right">
                    <div>
                        当前敏感词词库共<span style="color:#6fc8b2">{{zongShu}}</span>条,搜索查看
                    </div>
                    <div style="margin-top:15px;">
                        <el-input
                            size="small"
                            placeholder="请输入内容"
                            suffix-icon="el-icon-search"
                            v-model="inputValue">
                        </el-input>
                        <ul>
                            <li v-for="(item,index) in dataList" :key="index">
                                {{item.terms}}
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import ziDingYi from "./ziDingYi.vue";
import suoYou from "./suoYou.vue";
import fangXing from "./fangXing.vue";
export default {
  components: { ziDingYi, suoYou, fangXing },
  data() {
    return {
      activeName: "one",
      inputValue: "",
      dataList: [],
      zongShu: 0,
      one: true,
      two: false,
      three: false
    };
  },
  watch: {
    inputValue(val) {
      this.getData();
    }
  },
  created() {
    this.getData1();
  },
  methods: {
    handleClick(tab, event) {
      if (this.activeName == "one") {
        this.one = true;
        this.two = false;
        this.three = false;
      } else if (this.activeName == "two") {
        this.one = false;
        this.two = true;
        this.three = false;
      } else if (this.activeName == "three") {
        this.one = false;
        this.two = false;
        this.three = true;
      }
    },
    getData(){
      let params = {
        SensitiveWordsName: this.inputValue,
        pageIndex: 1,
        pageSize: 9999999
      }
      this.$api.get("/api/SensitiveWords/GetSensitiveWordsPaged",params).then(res=>{
        if (res.statusCode == 200) {
          this.dataList = res.data.list;
          this.zongShu = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "success"
          });
        }
      })

    },
    getData1(){
      let params = {
        pageIndex: 1,
        pageSize: 9999999
      }
      this.$api.get("/api/SensitiveWords/GetSensitiveWordsPaged",params).then(res=>{
        if (res.statusCode == 200) {
          this.zongShu = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "success"
          });
        }
      })

    }
  }
};
</script>

<style scoped>
.j_right {
  margin: 50px 0;
  padding: 0 15px;
  border-left: 1px solid #ccc;
  height: 400px;
  color: #777;
}
ul {
  margin-top: 10px;
}
li {
  line-height: 1.5em;
  padding: 0 5px;
  font-size: 15px;
}
</style>